<template>
	<view class="home-slides" :class="isHome">
		<swiper :class="{'screen-swiper': true, 'square-dot': dotStyle, 'round-dot': !dotStyle, 'details-swipper': height },isHome" :style="{height: height}" :indicator-active-color="indicatorActiveColor" :indicator-dots="true" :circular="true" :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item,index) in slides" :key="index">
				<image :src="item.thumb" :mode="mode"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	/**
	 * 首页轮播图
	 */
	export default {
		name: 'MyHomeMenus',
		data() {
			return {
				cardCur: 0,
				swiperList: [],
				dotStyle: true,
				towerStart: 0,
				direction: ''
			};
		},
		props:['slides', 'height', 'indicatorActiveColor', 'mode','isHome'],
		mounted() {
			console.log(this.isHome);
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			console.log(this.$props)
		},
		methods: {
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			}
		}
	}
</script>

<style lang="less">
	.isHome{
		height: 360rpx;
		padding: 0 20rpx;
		// background-color: #fee12e;
		margin-bottom:50rpx;
		image{
			height: 400rpx;
			border-radius: 15rpx;
		}
		.screen-swiper {
			max-height: 400rpx;
			min-height: 400rpx;
		}
	}
	.isShop{
		height: 360rpx;
		// padding: 0 20rpx;
		background-color: #fee12e;
		image{
			height: 400rpx;
			border-radius: 15rpx;
		}
		.screen-swiper {
			max-height: 400rpx;
			min-height: 400rpx;
		}
	}
	.isSwiper{
		height: 360rpx;
		// padding: 0 20rpx;
		// background-color: #fee12e;
		image{
			height: 400rpx;
			border-radius: 15rpx;
		}
		.screen-swiper {
			max-height: 400rpx;
			min-height: 400rpx;
		}
	}
</style>